<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<h5>
    <!---->
    <a href="">ref</a>
</h5>
<div id="drivers">
    <el-form :inline="true" :model="dr" class="demo-form-inline">
        <el-form-item label="驾驶员名称">
            <el-input v-model="dr.driverName" autocomplete="off" @change="nameChange(dr.driverName)" placeholder="输入驾驶员名称"></el-input>
        </el-form-item>
        <el-form-item label="驾驶证号">
            <el-input v-model="dr.driverLicense" autocomplete="off" @change="licenseChange(dr.driverLicense)" placeholder="输入驾驶证号"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary"  icon="el-icon-search" @click="find" circle></el-button>
        </el-form-item>
    </el-form>
    <!-- 表单模态框区域 -->
    <el-button @click="dialogFormVisible = true"
               type="primary" plain>添加老司机</el-button>
    <el-dialog title="老司机" :visible.sync="dialogFormVisible" @close="closeDialog">
        <el-form :model="driver">
            <el-form-item label="老司机姓名">
                <el-input v-model="driver.driverName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份证">
                <el-input v-model="driver.idCard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="驾驶证">
                <el-input v-model="driver.driverLicense" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="driver.driverControl" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="物流公司">
            <el-select v-model="driver.logisticsId" placeholder="请选择">
                <el-option
                        v-for="log in logs"
                        :key="log.logisticsId"
                        :label="log.logisticsName"
                        :value="log.logisticsId">
                </el-option>
            </el-select>
        </el-form-item>
            <el-form-item label="负责车辆">
                <el-select v-model="driver.vehicleId" placeholder="请选择">
                    <el-option
                            v-for="v in vehicles"
                            :key="v.vehicleId"
                            :label="v.vehicleName"
                            :value="v.vehicleId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="性别">
                <el-input v-model="driver.driverSex" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工作年限">
                <el-input v-model="driver.driverAge" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveDrivers">确 定</el-button>
        </div>
    </el-dialog>
    <!--数据显示页面-->
    <el-table
            :data="drivers"
            style="width: 100%">
        <el-table-column
                label="驾驶员编号"
                width="100">
            <template slot-scope="scope">
                <i class="el-icon-loading"></i>
                <span style="margin-left: 10px">{{ scope.row.driverId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="驾驶员姓名"
                width="100">
            <template slot-scope="scope">
                <i class="el-icon-user"></i>
                <span style="margin-left: 10px">{{ scope.row.driverName }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="驾驶证号"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-sunrise"></i>
                <span style="margin-left: 10px">{{ scope.row.driverLicense }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="身份证号"
                width="200">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.idCard }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="性别"
                width="80">
            <template slot-scope="scope">
                <i class="el-icon-male"></i>
                <span style="margin-left: 10px">{{ scope.row.driverSex }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="联系方式"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-phone-outline"></i>
                <span style="margin-left: 10px">{{ scope.row.driverControl }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="所属公司"
                width="120">
            <template slot-scope="scope">
                <i class="el-icon-burger"></i>
                <span style="margin-left: 10px">{{ scope.row.logistics.logisticsName }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="负责车辆"
                width="120">
            <template slot-scope="scope">
                <i class="el-icon-truck"></i>
                <span style="margin-left: 10px">{{ scope.row.vehicle.vehicleName }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="工龄"
                width="80">
            <template slot-scope="scope">
                <i class="el-icon-timer"></i>
                <span style="margin-left: 10px">{{ scope.row.driverAge }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-popconfirm
                        @confirm="handleDelete(scope.$index, scope.row)"
                        title="确定删除吗？">
                    <el-button
                            size="mini" type="danger"
                            slot="reference">删除</el-button>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <div class="block" style="margin-top: 10px;">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="page_size"
                       :page-size="4"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="count"
                       :background="back">
        </el-pagination>
    </div>
</div>
<script>
    new Vue({
        el:"#drivers",
        data(){
            return{
                dialogFormVisible:false,
                drivers:[],
                // 当前页数
                currentPage: 1,
                // 总数
                count : 0,
                // 每页的数据
                page_size : [3,6],
                // 当前每页的数据
                pageSize : 3,
                // 分页背景
                back: true,
                driver:{},
                dr:{},
                logs:[],
                vehicles:[],
                driverLicense:"",
                driverName:""
            }
        },
        methods:{
            nameChange(val){
                if (val == null){
                    return;
                }else {
                    this.driverName = val;
                }
            },
            licenseChange(val){
                if (val == null){
                    return;
                }else {
                    this.driverLicense = val;
                }
            },
            loadDrivers(){
                axios.get("/drivers/"+this.currentPage+"/"+this.pageSize+"?driverName=" + this.driverName + "&driverLicense=" + this.driverLicense)
                    .then(res =>{
                        this.drivers=res.data.data;
                        this.count=res.data.count;
                    })
            },
            loadLogistics(){
                axios.get("/logistics")
                .then(res =>{
                    this.logs = res.data;
                })
            },
            loadVehicles(){
                axios.get("/vehicles")
                .then(res =>{
                    this.vehicles=res.data;
                })
            },
            handleEdit(index, row) {
                this.driver=JSON.parse(JSON.stringify(row));
                this.dialogFormVisible=true;
            },
            handleDelete(index, row) {
                axios.delete("/driver/" + row.driverId)
                .then(res =>{
                    if(res.data=="ok"){
                        this.loadDrivers();
                    }
                })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadDrivers();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadDrivers();
            },
            closeDialog(){
                this.driver={}
            },
            saveDrivers(){
                let drive = JSON.parse(JSON.stringify(this.driver));
                axios.post("/driver",drive)
                    .then(res =>{
                        if(res.data=="ok"){
                            this.dialogFormVisible=false;
                            this.loadDrivers();
                        }
                    })
            },
            find(){
                this.loadDrivers();
            }
        },
        mounted(){
            this.loadDrivers();
            this.loadLogistics();
            this.loadVehicles();
        }
    })
</script>
</body>
</html>